<template>
<div class='keyboard-container'>
  <div class="keyboard">
    <!-- 第一行 -->
    <div class="keyboard-row">
      <div v-for="key in ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace']" :key="key"
           :class="['key', { 
             active: currentKey.toLowerCase() === key.toLowerCase() || 
             (key === 'Shift' && currentKey === currentKey.toUpperCase() && /[A-Z]/.test(currentKey)) ||
             (key === 'Space' && currentKey === ' ')
           }]"
           :data-key="key">
        {{ key }}
      </div>
    </div>
    <!-- 第二行 -->
    <div class="keyboard-row">
      <div v-for="key in ['Tab', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\']" :key="key"
           :class="['key', { 
             active: currentKey.toLowerCase() === key.toLowerCase() || 
             (key === 'Shift' && currentKey === currentKey.toUpperCase() && /[A-Z]/.test(currentKey)) ||
             (key === 'Space' && currentKey === ' ')
           }]"
           :data-key="key">
        {{ key }}
      </div>
    </div>
    <!-- 第三行 -->
    <div class="keyboard-row">
      <div v-for="key in ['CapsLock', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '\'', 'Enter']" :key="key"
           :class="['key', { 
             active: currentKey.toLowerCase() === key.toLowerCase() || 
             (key === 'Shift' && currentKey === currentKey.toUpperCase() && /[A-Z]/.test(currentKey)) ||
             (key === 'Space' && currentKey === ' ')
           }]"
           :data-key="key">
        {{ key }}
      </div>
    </div>
    <!-- 第四行 -->
    <div class="keyboard-row">
      <div v-for="key in ['Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'Shift']" :key="key"
           :class="['key', { 
             active: currentKey.toLowerCase() === key.toLowerCase() || 
             (key === 'Shift' && currentKey === currentKey.toUpperCase() && /[A-Z]/.test(currentKey)) ||
             (key === 'Space' && currentKey === ' ')
           }]"
           :data-key="key">
        {{ key }}
      </div>
    </div>
    <!-- 第五行 -->
    <div class="keyboard-row">
      <div v-for="key in ['Ctrl', 'Win', 'Alt', 'Space', 'Alt', 'Win', 'Ctrl']" :key="key"
           :class="['key', { 
             active: currentKey.toLowerCase() === key.toLowerCase() || 
             (key === 'Shift' && currentKey === currentKey.toUpperCase() && /[A-Z]/.test(currentKey)) ||
             (key === 'Space' && currentKey === ' ')
           }]"
           :data-key="key">
        {{ key }}
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    currentKey: {
      type: String,
      default: () => "",
    },
  },
};
</script>

<style scoped>
.keyboard-container {
  display: flex;
  justify-content: center;
}
.keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #f0f0f0;
  padding: 10px;
  border-radius: 10px;
  width: fit-content;
}

.keyboard-row {
  display: flex;
  gap: 5px;
  justify-content: space-between;
  padding: 0 10px;
}

.key {
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  min-width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.key[data-key="Backspace"],
.key[data-key="Tab"],
.key[data-key="\\"],
.key[data-key="CapsLock"],
.key[data-key="Enter"],
.key[data-key="Shift"] {
  min-width: 80px;
}

.key[data-key="Ctrl"],
.key[data-key="Alt"],
.key[data-key="Win"] {
  min-width: 60px;
}

.key[data-key="Space"] {
  min-width: 400px;
}

.key.active {
  background: #ffcc00;
  font-weight: bold;
}
</style>
